<template>
  <div class="app">
    <el-container>
      <el-header>
      <div class="report_header" style="display: flex; justify-content: space-between;">
          <div>
          <div class="report_header_left"></div>
          <div style="display:flex;">
          <div class="report_header_query" style="width:260px">
            <queryDate @queryDateClick='queryDateClick' :beginDate='beginDate' :endDate="endDate"></queryDate>
          </div>
          <div class="report_header_query">
            <el-select  v-model="query.shopId"  clearable placeholder="门店" >
              <el-option v-for="item in shopIdOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </div>
          <div class="report_header_query">
            <!-- <queryEmployee @queryEmployeeClick='queryEmployeeClick'></queryEmployee> -->
               <el-select style="width: 100%" clearable @change="employeeIdchange" v-model="query.employeeId" filterable placeholder="送货员" :filter-method="queryemployeeId">
                <el-option  v-for="item in sysEmployeeList" :key="item.id" :label="item.name"  :value="item.id"></el-option>
              </el-select>
          </div>
            <div class="report_header_query"><queryProduct @queryProductClick='queryProductClick'></queryProduct></div>
          </div>
          </div>
          <div>
          <el-button style="margin-left: 10px" size="small" type="primary" @click="loadOrder">查询</el-button>
          <ExportList2Excel ref="exportList2Excel" @handleExport="handleExport" name="导出"/>
          </div>
        </div>
      </el-header>
      <el-main>
        <el-table :span-method="totalLine" ref="table" :height="curHeight" :data="tableData" border style="width: 100%;" >
          <el-table-column type="index" align="center" label="序号" header-align="center" width="50">
            <template slot-scope="scope">{{ scope.$index == tableData.length-0?'总计':scope.$index +1}}</template>
          </el-table-column>
          <el-table-column prop="orderSn" label="订单号" header-align="center" :show-overflow-tooltip="true" width="150">
          </el-table-column>
           <el-table-column prop="orderDate" label="订货日期" header-align="center" :show-overflow-tooltip="true" width="120">
          </el-table-column>
          <el-table-column prop="shopName" label="门店" header-align="center" :show-overflow-tooltip="true" width="120">
          </el-table-column>
          <el-table-column prop="memberCode" label="客户编号" header-align="center" :show-overflow-tooltip="true" width="120">
          </el-table-column>
          <el-table-column prop="memberName" width="150" header-align="center" :show-overflow-tooltip="true" label="客户名称">
          </el-table-column>
          <el-table-column align="left" prop="address" header-align="center" width="250" label="收货地址">
          </el-table-column>
          <el-table-column align="center" prop="memberCategoryName" label="客户分类" header-align="center" width="80" >
          </el-table-column>
          <el-table-column align="left" width="80" header-align="center" prop="vipName" label="客户等级"></el-table-column>
          <el-table-column align="left" label="送货留言" header-align="center" prop="memo" width="120"></el-table-column>
          <el-table-column align="left" prop="name" width="250" header-align="center" label="商品名称">
          </el-table-column>
          <el-table-column align="left" prop="sn" header-align="center" width="120" label="商品条码">
          </el-table-column>
          <el-table-column align="center" prop="spec" header-align="center" width="100" label="商品规格">
          </el-table-column>
          <el-table-column align="center" prop="unit" header-align="center" width="60" label="单位">
          </el-table-column>
          <el-table-column align="center" prop="quantity" header-align="center" width="80" label="送货数量">
          </el-table-column>
          <el-table-column align="center" prop="returnQuantity" header-align="center" width="80" label="退货数量">
          </el-table-column>
            <el-table-column prop="emptyBarrelQuantity"  label="回桶数量" header-align="center" :show-overflow-tooltip="true" width="80">
          </el-table-column>
          <el-table-column align="center" prop="price" header-align="center" width="80" label="单价">
          </el-table-column>
          <el-table-column align="center" prop="subTotal" header-align="center" width="120" label="金额">
          </el-table-column>
          <el-table-column prop="shippingEmployeeName" label="送货员" header-align="center" :show-overflow-tooltip="true" width="120">
          </el-table-column>
          <el-table-column prop="managerName" label="客户经理" header-align="center" :show-overflow-tooltip="true" width="120">
          </el-table-column>
          <el-table-column prop="deliveryDate" label="送达日期" header-align="center" :show-overflow-tooltip="true" width="120">
          </el-table-column>
          <el-table-column prop="completeDate" label="完成日期" header-align="center" :show-overflow-tooltip="true" width="120">
          </el-table-column>
        </el-table>
      </el-main>
      <el-footer>
        <div class="report_footer_box">
          <pagination style="margin-left: 10px" :total="total" :page.sync="pageNum" :limit.sync="pageSize" @pagination="loadOrder"></pagination>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
  import {list as sysEmployeeList} from '@/api/sysEmployee'
  import queryDate from '@/components/Query/queryDate'
  import queryShop from '@/components/Query/queryShop'
  import queryMember from '@/components/Query/queryMember'
  import queryEmployee from '@/components/Query/queryEmployee'
  import queryProduct from '@/components/Query/queryProduct'
  import { list as shopList } from '@/api/shop'
  import ExportList2Excel from "@/components/ExportList2Excel";
  import Pagination from '@/components/Pagination';
  import OfficeDialog from '@/components/OfficeDialog/index'
  import CategoryDialog from '@/components/CategoryDialog/index'
  import {shippingDetailList, summary} from '@/api/shippingSettle'
  import {employeeCountList} from '@/api/report'
  import utils from '@/utils/utils'
  // import { exportReport } from '@/api/report'
  import { dateFormatter } from '@/filters'
  import { list as memberList } from '@/api/member'
  import { list as productList } from '@/api/product'
  import { list as supplierList } from '@/api/supplier'
  export default {
    name: 'deliverymanReport-datailed',
    data(){
      return{
        shopIdOptions:[],
               sysEmployeeList: [],
        beginDate:'',
        endDate:'',
      curHeight:"",
      DetailedList: [],
      dialogVisible: false,
      printing: 5000,
      query: {
        shopId: '',
        productId: '',
        endDate: '',
        beginDate: '',
        memberId: '',
        employeeId: ''
      },
      tableData: [],
      curHeight: null,
      pageSize: 20,
      total: 0,
      pageNum: 1,
      summaryForm: {
        quantity: 0,
        discount: 0,
        totalCost: 0,
        maoli: 0,
        maolilv: 0,
        totalAmt: 0
      },

      }
    },
    components:{
       Pagination,
    queryDate,
    queryShop,
    queryMember,
    queryEmployee,
      queryProduct,
      ExportList2Excel

    },
    created() {
      this.getShop()
      this.loadSysEmployee()
            this.beginDate=this.$route.query.beginDate
            this.endDate=this.$route.query.endDate
            this.query.beginDate=this.$route.query.beginDate
            this.query.endDate=this.$route.query.endDate
            this.query.employeeId=String(this.$route.query.employeeId)
            if(!utils.isNull(this.$route.query.shopId)){
              this.query.shopId=Number(this.$route.query.shopId)
            }
          this.loadOrder()

    },
    mounted() {
      this.comeIn();
      this.beforeMount();
    },
    methods:{
      employeeIdchange(val){
        console.log(val);
        if(utils.isNull(val)){
          this.loadSysEmployee()
        }
      },
      queryProductClick(data){
        this.query.productId = data.productId
        this.proname = data.proname
      },
      queryemployeeId(data){
        console.log(data);
        let params = new URLSearchParams();
        params.append('name', data)
          sysEmployeeList(params).then(response => {
          console.log(response);
          this.sysEmployeeList = response.data.data
        }).catch(error => {
          console.log('error!!')
        });
      },
    loadSysEmployee() {
        var _this = this

        sysEmployeeList().then(response => {
          console.log(response);
          _this.sysEmployeeList = response.data.data
        }).catch(error => {
          console.log('error!!')
        });
      },
            getShop () { // 获取仓库
        shopList().then(res => {
          res.data.data.forEach((option, index) => {
            const obj = {
              value: option.id,
              label: option.name
            }
            this.$set(this.shopIdOptions, index, obj)
          })
        }).catch(err => {
          console.log(err)
        })
      },
      queryShopClick(data){
        this.query.shopId=data.shopId
      },
      queryEmployeeClick(data){
        console.log(data);
        this.query.employeeId=data.employeeId
      },
      queryDateClick(data) {
        this.query.beginDate = data.beginDate
        this.query.endDate = data.endDate
      },
      //下载模板的函数
      handleExport() {
        let _this= this
        var  loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        let data ={}
          data.tHeader = ["订单号",'订货日期',"配送门店","客户编号","客户名称","收货地址","客户分类","客户等级",'送货留言',"商品名称",'商品条码','商品规格','商品单位',"送货数量","退货数量","回桶数量","单价",'金额','楼层费','送货员','客户经理','送达日期','完成日期']
          data.filterVal = ["orderSn",'orderDate',"shopName","memberCode","memberName","address","memberCategoryName","vipName",'memo',"name",'sn','spec','unit','quantity','returnQuantity',"emptyBarrelQuantity","price","subTotal","levelFreight","shippingEmployeeName","managerName","deliveryDate","completeDate"]
        data.filename = "结算明细表";
        var  params=new URLSearchParams()
         params.append('pageNum', this.pageNum)
         params.append('pageSize', this.printing)
         params.append('dstartDate', this.query.beginDate)
         params.append('dendDate', this.query.endDate)
        params.append('shopId', this.query.shopId)
        params.append('productId', this.query.productId)
         params.append('employeeId', this.query.employeeId)
        shippingDetailList(params).then(res=>{
            data.list=res.data.data
            summary(params).then(response=>{
              response.data[0].sn='合计'
              data.list.push(response.data[0])
              _this.$refs.exportList2Excel.handleDownload(data);
              loading.close();
            })
              if(data.list.length==this.printing){
            this.pageNum++
             console.log(this.pageNum);
             this.handleExport()
          }
          else{
            return;
          }

          }).catch(error=>{
            _this.$refs.exportList2Excel.unlockLoading()
            loading.close();
            console.log('error!!')
          })
      },
      loadOrder(){
        var  params=new URLSearchParams()
      params.append('pageNum', this.pageNum)
      params.append('pageSize', this.pageSize)
      params.append('dstartDate', this.query.beginDate)
      params.append('dendDate', this.query.endDate)
      params.append('shopId', this.query.shopId)
        params.append('productId', this.query.productId)
        params.append('employeeId', this.query.employeeId)
          shippingDetailList(params).then(res=>{
            res.data.data.forEach(item=>{
              if (item.matchPointReceived==null){
                item.matchPointReceived=0
              }
            })
            this.tableData=res.data.data
            this.total=res.data.total
           summary(params).then(response=>{
                 response.data[0].orderSn = '合计'
              if(response.data[0]!=null&&response.data.length>0){
                 this.tableData.push(response.data[0])
                }
           })
          })
      },
      beforeMount() {
      var _this = this
      window.onresize = () => {
        return (() => {
          var h = document.documentElement.clientHeight || document.body.clientHeight;
          _this.curHeight = h - 224 //减去页面上固定高度height
        })();
      };
    },
    comeIn() {
      console.log('222')
      var h = document.documentElement.clientHeight || document.body.clientHeight;
      this.curHeight = h - 224 //减去页面上固定高度height
    },
      totalLine({
        row,
        column,
        rowIndex,
        columnIndex
      }) {
        var _this = this
        // console.log(_this.tableData.length - 1)
        // console.log(columnIndex)
        if (rowIndex === _this.tableData.length - 1) {
          if (columnIndex === 0) {
            return {
              rowspan: 1,
              colspan: 6
            };
          } else if (columnIndex === 1 || columnIndex === 2 || columnIndex === 3 || columnIndex === 4||columnIndex === 5) {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
      }
    },
  }
</script>

<style scoped>
  .app {
    background-color: rgba(248, 248, 248, 0.8);
  }
  /deep/.el-header {
    padding: 10px;
    height: 100% !important;
    padding-bottom: 0;
  }
      .details_Title {
    font-size: 14px;
    color: #409EFF;
  }
.justify_right {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .primary{
    margin-left: 10px;
  }
  .report_header {
    width: 100%;
    min-height: 40px;
    box-sizing: border-box;
    background-color: white;
    display: flex;
    align-items: center;
    padding-bottom: 5px;
    position: relative;
    padding-left: 5px;
    padding-right: 10px;
  }


  .report_header_left {
    width: 5px;
    height: 100%;
    background-color: #409EFF;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
  }

  .report_header_query {
    margin-left: 10px;
    width: 200px;
    margin-top: 5px;
  }
  /deep/.el-button{
    height: 35px;
  }
  .report_header_date {
    box-sizing: border-box;
    margin-left: 10px;
    width: 270px;
    margin-top: 5px;
  }

  .report_footer_box {
    width: 100%;
    border: 1px solid #dfe6ec;
    border-top: none;
    height: 60px;
    display: flex;
    align-items: center;
    background-color: white;
  }

  /deep/.el-footer {
    padding: 10px;
    padding-top: 0;
  }

  .report_footer_box_title {
    margin-left: 10px;
    font-size: 12px;
    font-weight: bold;
  }

  .elOption {
    background-color: #909399;
    color: white;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
    height: 40px
  }


  /deep/.el-table--group::after,
  .el-table--border::after,
  .el-table::before {
    background-color: white;
  }

  /deep/.el-table__body tbody .el-table__row:last-child {
    background-color: #F5F7FA;
  }

  /deep/.el-main {
    padding: 10px;
    padding-bottom: 0;
  }

  /deep/.el-table--enable-row-transition .el-table__body td {
    border-bottom: none;
  }

  /deep/.el-table::before {
    height: 0px;
  }

  /deep/.el-table--border th {
    background-color: rgba(241, 242, 243, 1);
  }

  /deep/.pagination-container {
    margin-top: 0 !important;
  }
</style>
